<template>
  <!-- awaitPay 待缴费 -->
  <PageContainer>
    <view class="container">
      <Header :title="headTitle" :isBoxShadow="false" />
      <!-- 已缴费 && 审核未通过 -->
      <template
        v-if="
          payInfo.state === PaymentStatusEnum.ALREADYPAYCOST &&
          payInfo.auditStatus !== PayAuditStatusEnum.AUDITED
        "
      >
        <TResult
          :types="payInfo.auditStatus === PayAuditStatusEnum.REFUSAL ? 'error' : 'waiting'"
          :title="payInfo.auditStatus === PayAuditStatusEnum.REFUSAL ? '驳回' : '缴费审核中'"
          :content="payInfo.auditStatus === PayAuditStatusEnum.REFUSAL ? payInfo?.remarks : ''"
          cancelText=""
          confirmText=""
        />
        <!-- <AuditStatus :auditStatus="payInfo.auditStatus" :remarks="payInfo?.remarks" /> -->
      </template>
      <!-- 待缴费 || 已通过,查看会员证 -->
      <template
        v-if="
          payInfo.state === PaymentStatusEnum.NOTPAYCOST ||
          payInfo.auditStatus === PayAuditStatusEnum.AUDITED
        "
      >
        <HeadInfo>
          <template #default>
            <view class="pt-10 fz-12">
              <view class="color1" v-if="payInfo.state === PaymentStatusEnum.NOTPAYCOST">
                <!-- {{payInfo.type === MemberOrderType.RENEW ? '待续费' : '待付款'}} -->
                待付款
              </view>
              <view v-else>会员名称:{{ payInfo.memberName }}</view>
            </view>
          </template>
        </HeadInfo>
        <BodyInfo :info="payInfo" />
      </template>

      <PayButton
        v-if="btnLoading"
        :info="payInfo"
        @goPayMode="goPayMode"
        @refresh="getPaymentInfo"
        @contact="openContactModal"
        @createOrder="createOrder"
      />

      <ContactReviewer
        :popupShow="contactPopupShow"
        :level="parame?.formStageId ?? 1"
        @close="closeContactModal"
      />
      <TencentCode
        :popupShow="!!useUser.openOfficialAccount"
        :followed-show="false"
        @close="useUser.openOfficialAccount = false"
      />
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  awaitPay  待缴费 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import HeadInfo from './components/headInfo.vue';
  import BodyInfo from './components/bodyInfo.vue';
  // import AuditStatus from './components/auditStatus.vue';
  import PayButton from './components/payButton.vue';
  import TencentCode from '@/components/OfficialAccount/tencentCode.vue';
  import ContactReviewer from './components/contactReviewer.vue';
  import TResult from '@/components/TResult/index.vue';

  import { paymentInfo, renewInfo, createPayOrder, resetSubmit } from '@/api/membership';
  import { type PayInfoData } from '@/api/membership/types';
  import { getMembershipOrder } from '@/api/order';
  import { OrderStateEnum } from '@/enums/orderEnum';
  import { ref, unref } from 'vue';
  import { onLoad, redirectTo } from '@/router';
  import { type AwaitPay } from '@/router/types/modules/membership';
  import { PaymentStatusEnum, PayAuditStatusEnum, MemberOrderType } from '@/enums/membershipEnum';
  import { onShow } from '@dcloudio/uni-app';
  import { useUserStoreWithOut } from '@/store/modules/user';
  const useUser = useUserStoreWithOut();

  const headTitle = ref('');
  const parame = ref({} as AwaitPay);
  onLoad<'AwaitPay'>((op: AwaitPay) => {
    parame.value = op;
  });
  onShow(() => {
    getPaymentInfo();
  });

  const payInfo = ref({} as PayInfoData);
  const btnLoading = ref(false);
  async function getPaymentInfo() {
    try {
      if (unref(parame).type === MemberOrderType.RENEW) {
        payInfo.value = await renewInfo(); // 续费信息接口
      } else {
        if (!unref(parame).id) {
          uni.showToast({
            title: '缺少申请信息',
            icon: 'none',
          });
          return;
        }
        payInfo.value = await paymentInfo(unref(parame).id as number); // 缴费信息接口
      }

      if (unref(payInfo).state === PaymentStatusEnum.NOTPAYCOST) {
        headTitle.value = '待缴费';
      } else if (
        unref(payInfo).state === PaymentStatusEnum.ALREADYPAYCOST &&
        unref(payInfo).auditStatus !== PayAuditStatusEnum.AUDITED
      ) {
        headTitle.value = '缴费核验';
      } else {
        headTitle.value = '会籍信息';
      }

      // 已生成订单,则需要判断是否为待付款订单,是则跳往订单详情
      if (unref(payInfo).orderCode) {
        const orderInfo = await getMembershipOrder(unref(payInfo).orderCode as string);
        if (orderInfo.orderState === OrderStateEnum.NOPAYMENT) {
          uni.showModal({
            title: '提示',
            content: '您已生成订单,是否前往订单支付?',
            success: ({ confirm }) => {
              const code = unref(payInfo).orderCode;
              confirm &&
                code &&
                redirectTo({ name: 'membershipOrder', options: { orderCode: code } });
            },
          });
          return;
        }
      }
      btnLoading.value = true;
    } catch (error) {
      console.log(error);
    }
  }

  // 返回缴费页面
  const goPayMode = function () {
    resetSubmit(unref(payInfo).id).then(() => {
      getPaymentInfo();
    });
  };

  // 在线支付,创建订单-跳往订单详情
  const createOrder = function () {
    createPayOrder(unref(payInfo).id).then((res) => {
      redirectTo({ name: 'membershipOrder', options: { orderCode: res.orderCode } });
    });
  };

  // 打开和关闭联系审核人员
  const contactPopupShow = ref(false);
  function openContactModal() {
    contactPopupShow.value = true;
  }
  function closeContactModal() {
    contactPopupShow.value = false;
  }
</script>

<style lang="scss" scoped>
  $color-primary: #2878ff;

  .color1 {
    color: $color-primary;
  }

  .title {
    color: #808080;
  }

  .btn {
    height: 100rpx;
    line-height: 100rpx;
    border-radius: 20rpx;
  }
</style>
